<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <div th:replace="~{common::css}"></div>
    <title>标签管理</title>
</head>
<body class="m-admin-tag">
<!--导航-->


<div th:replace="~{common::menu(3)}"></div>
<!--二级导航-->
<div class="ui  attached pointing menu" >
    <div class="ui  container">
        <div class="right menu" th:if="${session.user.role=='admin'}">
            <a th:href="@{/admin/toTags/{current}(current=1)}" class=" ui  inverted orange  button" >管理</a>
            <a th:href="@{/admin/toTagAdd}"  class=" ui   button button" >新增</a>

        </div>
    </div>
</div>
<!--中间内容-->
<div class="m-padded-tb-big m-container-small">
    <div class="ui container">
        <div class="ui  success message" th:unless="${#strings.isEmpty(message)}">
            <i class="close icon"></i>
            <div class="header">提示:</div>
            <p th:text="${message}">恭喜，操作成功</p>
        </div>
        <table class="ui celled center aligned  teal table">
            <thead>
            <tr>
                <th></th>
                <th>名称</th>
                <th th:if="${session.user.role=='admin'}">操作</th>
            </tr>
            </thead>
            <!--使用iterStar 来为编号计数-->
            <tbody th:each="tag,iterStat : ${page.getRecords()}">
            <tr>
                <td th:text="${iterStat.count}"></td>
                <td th:text="${tag.getName()}"></td>

                <td th:if="${session.user.role=='admin'}">
                    <a th:href="@{/toUpdateTag/{id}(id=${tag.getId()})}" class="ui mini teal basic button">编辑</a>
                    <a th:href="@{/deleteTag/{id}(id=${tag.getId()})}" class="ui  mini red  basic button">删除</a>
                </td>
            </tr>
            </tbody>
            <tfoot>
            <tr>
                <th colspan="6">

                    <div class="ui mini pagination menu"  th:if="${page.getPages()}>1">

                        <a th:href="@{/admin/toTags/{current}(current=1)}" class="item">首页</a>
                        <a   th:href="@{/admin/toTags/{current}(current=${page.hasPrevious()} ? ${page.getCurrent()-1}:1)}" class=" item" th:if="${page.hasPrevious()}"><i class="angle double left icon"></i>上一页</a>
                        <a  th:href="@{/admin/toTags/{current}(current=${page.hasNext()} ? ${page.getCurrent()+1}:${page.getCurrent()})}"  class=" item" th:if="${page.hasNext()}">下一页&#160;&#160;<i class="angle double right icon "></i></a>
                        <a th:href="@{/admin/toTags/{current}(current=${page.getPages()})}" class="item">尾页</a>

                    </div>
                    <a th:href="@{/admin/toTagAdd}" class="ui mini  right floated teal basic button" th:if="${session.user.role=='admin'}">新增</a>
                    <br/>
                    <br/>

                    <p class="m-text-spaced" >当前第<span th:text="${page.getCurrent()}"></span>页 共<span th:text="${page.getPages()}"></span>页，
                        共<span th:text="${page.total}" class="m-text-lined"></span>条记录</p>
                </th>
            </tr>

            </tfoot>

        </table>

    </div>
</div>
<br/>
<br/>
<br/>
<!--底部 footer-->
<div th:replace="~{common::footer}"></div>


<script src="../static/js/jquery-3.5.1.js" th:src="@{/js/jquery-3.5.1.js}"></script>
<script src="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.js"></script>
    <script>
        $('.menu.toggle').click(function (){
            $('.m-item').toggleClass('m-mobile-hide');

        });
        $('.ui.dropdown').dropdown({
            on : 'hover',
        });
        //消息提示关闭初始化
        $('.message .close')
            .on('click', function () {
                $(this)
                    .closest('.message')
                    .transition('fade');
            });
    </script>
</body>

</html>